<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>
<script>
    let {
        createApp,
        h,
        reactive,
        ref,
        onBeforeMount,
        onMounted,
        onBeforeUpdate,
        onUpdated,
        getCurrentInstance
    } = VueRuntimeDom

    let flag = ref(true)
    setTimeout(() => {
        flag.value = false
    }, 1000)

    let App = {
        setup() {
            // 在每个生命周期调用时，就已经拿到了当前组件的实例
            onBeforeMount(() => {
                console.log("onBeforeMount")
            })
            onMounted(() => {
                // 可以在生命周期内获取当前组件的实例
                const instance = getCurrentInstance()
                console.log(instance)
                console.log("onMounted")
            })
            onBeforeUpdate(() => {
                console.log("onBeforeUpdate")
            })
            onUpdated(() => {
                console.log("onUpdate")
            })


            return () => {
                return h("div", flag.value)
            }
        }
    }
    const app = createApp(App)
    app.mount("#app")
</script>
</html>
